// pages/music/index.js
import { getBanner, getPlaylist, getHighQualityList } from '../../service/api_music'
import { recommendStore, playerStore } from '../../store/index'
import throttle from '../../utils/throttle'
import queryRect from '../../utils/quert-rect'
// 进行防抖处理
const throttleImageLoad = throttle(queryRect, 1000, { trailing: true })
Page({
  data: {
    swiperHeight: 0,        // 轮播图高度
    banners: [],            // 轮播图数据
    recommendMusic: [],      // 推荐音乐
    playlistHot: [],        // 热门榜单
    HighQualityList: [],     // 精品推荐歌单 
    homeRankings: [],        // 简略榜单信息
    isShowplaceholer: false, // 当有数据显示
    loading: true,          // 内容加载完成
  },
  onLoad(options) {
    // 获取页面所要加载的数据
    this.getPageData()
    // 发起共享数据的请求
    recommendStore.dispatch("getToplistDataAction")
    // 从 recommendStore 获取数据
    recommendStore.onState('upRanking', (res) => {
      if (Object.keys(res).length === 0) return
      const recommendMusic = res.slice(0, 6)
      this.setData({ recommendMusic })
    })
    // this.getRankinghandler()
    recommendStore.onState('newRanking', this.getRankinghandler)
    recommendStore.onState('hotRanking', this.getRankinghandler)
    recommendStore.onState('originRanking', this.getRankinghandler)
    playerStore.onState("id", (id) => {
      if (id) {
        this.setData({ isShowplaceholer: true })
      } else {
        this.setData({ isShowplaceholer: false })
      }
    })
  },
  handleSearchClick() {
    wx.navigateTo({
      url: '../../pages/detail-search/index',
    })
  },
  // 发送网络请求
  getPageData() {
    getBanner().then(res => {
      this.setData({ banners: res.data.banners })
    })
    getPlaylist("全部").then(res => {
      // console.log(res.data.playlists);
      this.setData({ playlistHot: res.data.playlists })
    })
    getHighQualityList().then(res => {
      this.setData({ HighQualityList: res.data.playlists })
    })
  },
  // 当src加载完成 动态获取当前图片的高度
  handleImageLoad() {
    // wx.createSelectorQuery() 获取image加载完成后的宽高
    throttleImageLoad(".image").then(res => {
      this.setData({ swiperHeight: res[0].height })
    })
  },
  // 点击更多 跳转页面
  handleMoreClick() {
    this.navigateToDetailPage("飙升榜")
  },
  // 点击 榜单进行跳转
  handleRankingItemClick(event) {
    this.navigateToDetailPage(event.detail.name)
  },
  // 轮播图点击事件
  handleBannerClick(event) {
    const index = event.currentTarget.dataset.index
    if (this.data.banners[index].url) {
      wx.navigateTo({
        url: '../external-link/index?url=' + this.data.banners[index].url,
      })
    } else {
      const id = this.data.banners[index].song.id
      wx.navigateTo({
        url: '../../pages/music-player/index?id=' + id,
      })
      playerStore.dispatch("playMusicIdInfoAction", { id })
    }

  },
  // 点击 给playerStore发送数据
  handlesSongItemClick(event) {
    const index = event.currentTarget.dataset.index
    playerStore.setState("playListSongs", this.data.recommendMusic)
    playerStore.setState("playListIndex", index)
  },
  // 页面传参 跳转
  navigateToDetailPage(ranking) {
    wx.navigateTo({
      url: `/pages/detail-songs/index?ranking=${ranking}`,
    })
  },
  onUnload() {
  },
  // 监听数据改变 重新赋值
  getRankinghandler: function (res) {
    if (Object.keys(res).length === 0) return
    // 抽取信息
    const name = res.name
    const coverImg = res.coverImgUrl
    const playCount = res.playCount
    const tracks = res.tracks.slice(0, 3)
    // 封装成对象
    const rankingObj = { name, coverImg, playCount, tracks }
    // 浅拷贝 添加新数据 重新赋值
    const originHomeRankings = [...this.data.homeRankings]
    originHomeRankings.push(rankingObj)
    this.setData({ homeRankings: originHomeRankings })
  },
  onReady() {
    this.setData({ loading: false })
  }
})